<template>
    <div class="container">
        <h2 class="title">发布任务</h2>

        <el-form label-width="100px" :model="task" ref="task">
            <el-form-item label="任务标题" prop="title" :rules="[
                {required: true, message: '任务标题不能为空'}
            ]">
                <el-input v-model="task.title" placeholder="请输入任务标题" clearable></el-input>
            </el-form-item>

            <el-form-item label="任务介绍" prop="descs">
                <el-input v-model="task.descs" placeholder="请用一句话来介绍你的任务需求" clearable></el-input>
            </el-form-item>

            <el-form-item id="nums" label="任务数量" prop="nums" :rules="[
                { required: true, message: '任务数量不能为空'},
                { type: 'number', message: '任务数量必须为数字值'}
            ]">
                <el-input type="nums" placeholder="任务数量必须 ≥5" min="5" clearable autocomplete="off"
                    :style="{'width':'60%'}" 
                    v-model.number="task.nums"
                    :blur="price()"
                ></el-input>
                <el-input type="price" :style="{'width':'40%'}" v-model.number="task.price" placeholder="价格 ￥0" disabled autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="目标城市" prop="city" :rules="[
                { required: true, message: '目标城市不能为空'},
            ]">
                <div class="block">
                    <el-cascader v-model="task.city" :options="options" :props="{ expandTrigger: 'hover' }" @change="handleChange" clearable></el-cascader>
                </div>
            </el-form-item>

            <el-row>
                <el-button type="primary" @click="submitForm('task')">下一步（设计分享页面）</el-button>
            </el-row>
        </el-form>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                task: {
                    title: "",
                    descs: "",
                    nums: "",
                    price: "",
                    city: ""
                },
                options: [
                    { value: '120000', label: '上海市', children: [
                        { value: '120100', label: '杨浦区' }, 
                        { value: '120700', label: '闵行区' }, 
                        { value: '120400', label: '浦东新区' }
                    ]},
                    { value: '130000', label: '河北省', children: [
                        { value: '130100', label: '石家庄'}, 
                        { value: '130200', label: '唐山市' }, 
                        { value: '130400', label: '邯郸市' }
                    ]},
                ],
            }
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (!valid) {
                        return false
                    }
                })

                console.log(this.task);
            },
            handleChange(e) {
                console.log(e);
            },
            // 计算价格
            price() {
                return this.task.price = this.task.nums * 2;
            }
        }
    }
</script>

<style>
    .container {
        background-color: #FFF;
    }

    .el-form-item {
        margin-bottom: 15px;
        border-bottom: 1px solid var(--border-line);
    }

    .el-form-item__label {
        font-size: var(--font-sm-size);
    }

    .el-input__inner {
        font-size: var(--font-sm-size);
        border-radius: 0;
        border: none;
    }

    .el-cascader {
        display: block;
    }

    .container .el-row {
        margin-top: 25px;
    }

    .el-button {
        width: 100%;
    }

    .container #nums .el-form-item__content {
        display: flex;
    }
</style>

<style scoped>
    .title {
        padding: 12px 0;
        text-align: center;
        border-bottom: 1px solid var(--border-line);
    }

    .el-form {
        padding: 0 20px 20px;
    }

    input[type=price]::before {
        content: "￥";
    }
</style>